<!-- 加载条 -->

<style lang="scss">
@keyframes my-load {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>

<template>
  <div
    :style="{
      animationDuration: `${duration}ms`,
      animationFillMode: 'forwards',
      animationName: inanimate ? 'my-load' : '',
    }"
    :class="{ 'mine-nprogress': inanimate }"
    class="flex-shrink-0 h-0.5"
  ></div>
</template>

<script lang="ts" setup>
defineProps({
  inanimate: {
    // 是否在动画中
    type: Boolean,
    required: true,
  },
  duration: {
    // 动画时间
    type: Number,
    required: false,
    default: DEBOUNCE_TIME,
  },
})
</script>
